<template>
	<!--头部-->
	<div class="container">

	<header class="customHeaderStyle">
	<router-link :to="{path:'orderDetails', query:{shopId: $route.query.parentNo,status:$route.query.status}}">
		<div class="go-back">
			<i></i>
			<i></i>
			<i></i>
		</div>
	</router-link>
		<div class="headerCustomTitle">配送详情</div>
		<!-- <m-header title="配送详情"></m-header> -->
	</header>
	<div class="centent" >
		<div class="aui-content">
			<!--商品-->
			<div id="dispatchDiv">
				<ul class="aui-list aui-media-list orderInfo" >
					<li class="erroInfor" v-if="data.logisticsStatus === 3">
						<h3>异常详情：</h3>
						<p>{{data.logisticsInfo}}</p>
					</li>
					<li class="aui-list-item dispatchList">
						<div class="dispatchLeft" style="text-align:left;">
							
              				<span>运单号：{{data.packageNo}}</span>
							<!--<p>配送时间：{{data.deliveryTm | getTime_1}}</p>-->
							<div class="arriveTm">
								<p style = "color:#444; font-weight:bold">预计送达时间：{{dispatchTm}} {{getTime(data.expecteDeliveryStartTm)}}-{{getTime(data.expecteDeliveryEndTm)}}</p>
								<p style = "color:#444; font-weight:bold" v-show ="data.confirmTm">实际送达时间：{{expectTm}} {{getTime(data.confirmTm)}}</p>
							</div>
           				</div>
						<div class="dispatchRight">
							<span class="aui-text-danger">{{data.logisticsStatus === 1 ? '配送中' : (data.logisticsStatus === 2 ? '已签收' : '配送异常')}}</span>
						</div>
					</li>
				</ul>

				<div class="server_show">
					<ul class="aui-list aui-media-list commodity_list subtotal_list border_bottom" v-for="(detail, hh) in data.goodsList">
						<li class="aui-list-item">
							<div class="aui-media-list-item-inner wrapper">
								<div class="inner">
									<div class="aui-list-item-media">
										<!--<span class="img_span" :class="detail.buyType == 3 ? 'img_span_1' : ''">{{(detail.buyType == 2 ? "加价购" : (detail.buyType == 3 ? "赠品" : ""))}}</span>-->
										<img :src="detail.goodsImg || 'static/image/demo2.png'">
									</div>
								
									<div id="overStyle" class="aui-list-item-inner suggest">
										<h3>{{detail.goodsName}}</h3>
										<p>{{detail.goodsSpec||''}}</p>
										<p v-if="detail.buyType!=4">¥{{sonPrice(detail)}}{{detail.goodsUnit?'/':''}}{{detail.goodsUnit == 'kg' ?  '500g' :(detail.goodsUnit || '')}}&nbsp;&nbsp;&nbsp;<!--<del>¥98.8</del>--></p>
										<p v-if="detail.buyType==4">{{sonPrice(detail)}}积分{{detail.goodsUnit?'/':''}}{{detail.goodsUnit == 'kg' ?  '500g' :(detail.goodsUnit || '')}}&nbsp;&nbsp;&nbsp;<!--<del>¥98.8</del>--></p>
										<p v-if="detail.workingInfo && detail.workingInfo != '[]'">
											加工服务：<span style="color:#1E1E1E">{{getworkingInfo(JSON.parse(detail.workingInfo))}}</span>
										</p>
									</div>
								</div>	
								<div class="subtotal">
									<span v-if="detail.activityFlag == true && detail.buyType !=4">¥{{Number(detail.realTotalMoney).toFixed(2)}}&nbsp;<del>¥{{Number(detail.totalMoney).toFixed(2)}}</del></span>
									<span v-if="detail.activityFlag == false && detail.buyType !=4">¥{{Number(detail.realTotalMoney).toFixed(2)}}</span>
									<span v-if="detail.buyType ==4">{{detail.realTotalMoney}}积分</span>
									<h6 class = "sub_status">{{(detail.afterSaleStatus == 1 ? "已退款" : (detail.afterSaleStatus == 2 ? "已退货退款" : ""))}}</h6>
									<p>x{{detail.goodsType  === 7 ? detail.outGoodsNum + 'kg' : detail.outGoodsNum}}</p>
								</div>
								
							</div>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!--商品列表 end-->
	</div>
	</div>
</template>

<script>
import {packageDetail} from '../../api/wxh/getData.js'
import { Toast } from '../../utils/toast.js'
import Header from "../../real-components/myHeader"
export default {
	data() {
		return {
      		data: '',
			dispatchTm:'',
			expectTm:'',  
		}
	},
	async created() {
    let res = await  packageDetail('/'+ this.$route.query.orderNo+'/'+this.$route.query.packageNo);
    this.data = res.data[0];

	res.data.forEach((val, key) => {
		if (val.expecteDeliveryStartTm) {
			//当前时间 年-月-日 (date)
			let d = new Date();
			let date = (d.getMonth() + 1) + '-' + d.getDate();

			//预计到达 年-月-日(expdate)
			let date1 = new Date(val.expecteDeliveryStartTm);
			//let year = date1.getFullYear();
			let month = checkTime(date1.getMonth() + 1);
			let day = checkTime(date1.getDate());
			function checkTime(i) {
				if (i < 10) {
					i = '0' + i;
				}
				return i;
			}
			let expdate = month + '-' + day

			//实际到达 年-月-日 (actual)
			let date2 = new Date(val.confirmTm);
			//let year2 = date2.getFullYear();
			let month2 = checkTime(date2.getMonth() + 1);
			let day2 = checkTime(date2.getDate());
			let actual = month2 + '-' + day2
			//转换为时间戳 并计算相差天数
			let realDay_str = date.replace(/-/g,'/');
			let realDay1_str = expdate.replace(/-/g,'/');
			let realDay2_str = actual.replace(/-/g,'/');
			let realDay =new Date(realDay_str).getTime() - new Date(realDay1_str).getTime()
			let realDay1 =new Date(realDay_str).getTime() - new Date(realDay2_str).getTime()
			let days = parseInt(realDay / (1000 * 60 * 60 * 24));
			let days1 = parseInt(realDay1 / (1000 * 60 * 60 * 24))
			//判断包裹预计到达日期
			if(days == 0) {
				this.dispatchTm = '今日'
			} else if (days == -1) {
				this.dispatchTm = '明日'
			} else {
				this.dispatchTm = expdate
			}
			//判断包裹实际到达日期
			if(days1 == 0) {
				this.expectTm = '今日'
			} else if (days == -1) {
				this.expectTm = '明日'
			} else {
				this.expectTm = actual
			}

		}
	})

	},
	components: {
		"m-header":Header
	},
	computed: {
		status:function () {
		this.data.logisticsStatus == 1 ? '配送中'
			: (this.data.logisticsStatus == 2 ? '已签收' : '');
		}		
	},
	methods: {
    sonPrice(son){
       let  a = null;
	  if(son.goodsType === 7 && son.buyType !=4){
	  	a = Number(son.realTotalMoney/son.actualWeight/2).toFixed(2)
	  }else if(son.goodsType === 7 && son.buyType ==4){
	  	a = son.realTotalMoney/son.actualWeight/2
	  }else if(son.goodsType != 7 && son.buyType !=4){
	  	a = Number(son.realTotalMoney/son.outGoodsNum).toFixed(2)
	  }else if(son.goodsType != 7 && son.buyType ==4){
	  	a = son.realTotalMoney/son.outGoodsNum
	  }
	   return a;
    },
	//转换时间格式
	getTime(param, type) {
		if (!param) { return }
		let date = new Date(param);
		let year = date.getFullYear();
		let month = checkTime(date.getMonth() + 1);
		let day = checkTime(date.getDate());
		let hour = checkTime(date.getHours());
		let min = checkTime(date.getMinutes());
		let sec = checkTime(date.getSeconds());

		function checkTime(i) {
			if (i < 10) {
				i = '0' + i;
			}
			return i;
		}

		if (type === 1) {
			return day + '天' + hour + '小时' + min + '分';
		}

		return hour + ':' + min;
	},
		getworkingInfo(val) {
			if(val instanceof Array) {
				return val[0].processingItem
			} else {
				return val.processingattribute
			}
		}

	},
	watch: {

	},
  filters: {
    getTime_1: function (param) {
			if (!param) {
				return
			}
			let date = new Date(param);
			let year = date.getFullYear();
			let month = checkTime(date.getMonth() + 1);
			let day = checkTime(date.getDate());
			let hour = checkTime(date.getHours());
			let min = checkTime(date.getMinutes());
			let sec = checkTime(date.getSeconds());

			function checkTime(i) {
				if (i < 10) {
				i = '0' + i;
				}
				return i;
			}


			return year + '-' + month + '-' + day;
		}
  }
}
</script>
<style scoped="scoped">
.customHeaderStyle{
		position: relative;
		background: #fff;
		min-height: 3rem;
		border-bottom: 1px solid #eaeaea;
		color: #444;
		font-weight: 700;
		left: 0;
		top: 0;
		line-height: 2.25rem;
		/* z-index: 2; */
		width: 100%;
		font-size: .9rem;
		text-align: center;
		margin: 0;
		padding: 0;
	}
	.headerCustomTitle{
		overflow: hidden;
		right: 6rem;
		font-weight: 500;
		min-height: 2.25rem;
		position: absolute;
		margin: 0;
		text-align: left;
		white-space: nowrap;
		left: 3rem;
		width: auto;
		text-overflow: ellipsis;
		z-index: 2;
		font-size: 1.1rem;
		margin-top: .35rem;
		top: 1px;
	}
.container{
	overflow: hidden;
	background: #eaeaea;
	height: 100%;
	position: relative;
	width: 100%;
	top: 0;
	display: flex;
	flex-flow: column nowrap;
	/*overflow-y: scroll;*/
}
.centent {
/*	width: 100%;
	height: 100%;*/
	flex:1;
	overflow-y: scroll;
	background:#fff;
}
.orderInfo {
	margin-top: 0.75rem;
}
.aui-list {
	background-size:100% 0px;
}
#overStyle h3 {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}
#dispatchDiv .server_show {
		background: none;
	}
.subtotal_list .aui-list-item-media {
	width: 4rem;
	height: 4rem;
}
.aui-searchbar, .aui-bar-nav {
	position: static;
}
#overStyle {
	text-align: left;
	width: 60%;
}
.aui-list-item-inner {
	text-align: left;
}
.dispatchList {
	overflow:hidden;
	padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}
.dispatchLeft {
	width:75%;
	float:left;
}
.dispatchLeft_p {
  display: inline-block;
  border: 1px solid #EF5423;
  color: #EF5423;
  border-radius: 4px;
  width: 2rem;
  text-align: center;
  height: 1rem;
  margin-right: 0.2rem;
}
.dispatchRight {
	float: right;
    width: 25%;
    padding-top: 0.5rem;
	position:relative;
}
.erroInfor {
	text-align:left;
	padding:0.5rem;
	border-bottom:1px solid #ddd;
}
.border_bottom {
	border-bottom:1px solid #f0f0f0
}
.server_show::after {
	display:none;
}
.subtotal span {
	height:1.5rem;
	text-align: center;
	white-space: nowrap;
}
.subtotal span del {
	margin-top: -0.3rem;
	font-size: 0.6rem;
	color: #6b6b6b;
	display: block;
	
}
.subtotal .sub_status {
	height:1.5rem;
	color:#9a9a9a;
	font-size:0.6rem;
	white-space: nowrap;
}
.wrapper {
	display: flex;
	justify-content: space-between;
}
.inner {
	display: flex;
}
.arriveTm {
	clear:both;
	text-align:left;
}
</style>
